<!DOCTYPE html >
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" th:href="@{bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{css/main.css}">
    <style>
        .tree li {
            list-style-type: none;
            cursor: pointer;
        }

        .tree-closed {
            height: 40px;
        }

        .tree-expanded {
            height: auto;
        }



        {
            padding:5px;
            text-align:center;
            background-color:#e5eecc;
            border:solid 1px #c3c3c3;
        }
        {
            padding:50px;
            display:none;
        }

    </style>
</head>

<body>
<div th:replace="../templates/nav"></div><br/>
<div class="container-fluid">
    <div class="row">
        <div th:replace="../templates/menu"></div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" style="margin-top: 50px">
            <!--        <div class="col-sm-7 col-sm-offset-3 col-md-7 col-md-offset-2 main" >-->
            <div class="panel panel-default" style="float:left;width: 70%;margin-left: -5px">

                <div class="panel-body">
                    <button shiro:hasRole="'管理员'" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" style="height: 33px;width: 14px">+
                    </button>

                    <form class="form-inline" role="form" style="float:left;" id="selectForm">
                        <div class="form-group has-feedback" style="float:left;">
                            <div class="input-group">
                                <div class="input-group-addon">主题</div>
                                <input class="form-control has-success" type="text" placeholder="请输入查询条件" name="apalce" id="apalce2" th:value="${apalce}">
                            </div>

                            时间：<input type="date" id="begin" name="begin" th:value="${begin}" >-<input type="date" id="end" name="end" th:value="${end}" >
                        </div>
                        <div style="float:left;"> <button type="button" class="btn btn-warning" onclick="select()"><i class="glyphicon glyphicon-search"></i> 搜索</button></div>
                    </form>


                    <hr style="clear:both;">

                    <div class="table-responsive">
                        <form id="lockForm">
                            <table class="table  table-bordered">
                                <thead>
                                <tr>
                                    <th style='text-align: center'>序号</th>
                                    <th style='text-align: center'>活动主题</th>
                                    <th style='text-align: center'>活动时间</th>
                                    <th style='text-align: center'>详情</th>
                                </tr>
                                </thead>
                                <tbody id="tbody">
                                </tbody>

                                <tfoot>
                                <tr >
                                    <td colspan="12" align="center">
                                        <ul class="pagination" id="byPage">

                                        </ul>
                                    </td>
                                </tr>
                                </tfoot>
                            </table>
                        </form>
                    </div>
                </div>
            </div>

            <div style="width: 26%;height: 240px;background-color: lightpink;float:right;margin-top:25px">
                <div th:replace="../templates/cal" style="width: 80%"></div>
            </div>
        </div>


        <div  style="width: 1300px;height: 200px;margin-top:400px;margin-left:270px;">
            <div th:replace="../templates/cartton" ></div>
        </div>

    </div>
</div>



<!-- 新增模态框（Modal） -->
<form id="saveForm">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

                             <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                        &times;
                                    </button>
                                    <h4 class="modal-title" id="myModalLabel">
                                        新增活动
                                    </h4>
                                </div>
                                <div class="modal-body">

                                    <div class="form-group">
                                        <label for="apalce" style="float:left;">主题：</label><input name="apalce" id="apalce" class="form-control" style="width: 230px;float: left">
                                        <label for="atime" style="float:left;">时间：</label><input type="datetime-local" name="atime"  id="atime"  class="form-control myModal-input" style="width: 230px;float: left">
                                        <!--                        <label for="atime" style="float:left;">时间：</label><input type="datetime-local" name="atime" th:type="hidden" id="atime2" class="form-control myModal-input" style="width: 230px;float: left">-->
                                    </div>
                                    <br/>

                                    <div class="form-group">
                                        <label for="descrition">详情：</label><input name="descrition" id="descrition" class="form-control myModal-input">
                                    </div>
                                </div>

                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                    <button type="button" class="btn btn-primary" onclick="save()">确定新增 </button>
                                </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</form>

<script th:src="@{jquery/jquery-2.1.1.min.js}"></script>
<script th:src="@{|/jquery/jquery.md5.js|}"></script>
<script th:src="@{bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{script/docs.min.js}"></script>
<script type="text/javascript">
    $(function () {
        $(".list-group-item").click(function () {
            if ($(this).find("ul")) { // 3 li
                $(this).toggleClass("tree-closed");
                if ($(this).hasClass("tree-closed")) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });

        list(1);
    });

    //新增活动
    function save(){
        url = "/saveDo"
        var apalce = $("#apalce").val()
        var descrition = $("#descrition").val()
        var atime = $("#atime").val()

        if(apalce == null || apalce == ""){
            layer.msg("主题不能为空", {time: 1000, icon: 5, shift: 6}, function () {
            });
            return
        }
        if(atime == null || atime == ""){
            layer.msg("时间不能为空", {time: 1000, icon: 5, shift: 6}, function () {
            });
            return
        }
        if(descrition == null || descrition == ""){
            layer.msg("描述不能为空", {time: 1000, icon: 5, shift: 6}, function () {
            });
            return
        }

        var newatime = atime.replace('T'," ")
        if(apalce == null || descrition == null || newatime == null){
            alert("信息输入缺少");return
        }
        $.get(url,"apalce="+apalce+"&descrition="+descrition+"&atime="+newatime,function (data){
            if(data.result){
                list(1)
                //模态框数据清除
                $("#saveForm")[0].reset();
                //模态框隐藏(点击其他区域)
                $("#saveForm").modal("hide");
                layer.msg("增加成功", {time: 1000, icon: 6, shift: 6}, function () {
                });
            }
        })
    }
    //展示页面
    function list(currentPage){
        url = "/actionDo"
        var apalce = $("#apalce2").val()
        var begin = $("#begin").val()
        var end = $("#end").val()
        $.get(url,"currentPage="+currentPage+"&apalce="+apalce+"&begin="+begin+"&end="+end,function (data){
            if(data.result){
                var htmldata1 = "";
                $.each(data.actionList,function(index,action){
                    htmldata1 = htmldata1 +"<tr style='text-align: center'><td>"+(index*1+1+(data.pageBean.currentPage-1)*5)+"</td><td>"+action.apalce+"</td><td>"+action.atime+"</td><td><a onclick='info("+action.aid+")'>详情</a></td></tr>"
                })
                $("#tbody").html(htmldata1);

                var pageStr = "";
                pageStr += '<li class="' + (data.pageBean.currentPage == 1 ? 'disabled' : '') + '"><a href="#" onclick="list(' + (data.pageBean.currentPage>=1?data.pageBean.countPage-1:1)+ ')">上一页</a></li>';
                for (var i = 1; i <= data.pageBean.countPage; i++) {
                    pageStr += '<li class="' + (data.pageBean.currentPage == i ? 'active' : '') + '"><a href="#" onclick="list(' + i + ')">' + i + '<span class="sr-only">(current)</span></a></li>';
                }
                pageStr += '<li class="' + (data.pageBean.currentPage == data.pageBean.countPage ? 'disabled' : '') + '"><a href="#" onclick="list('+(data.pageBean.currentPage==data.pageBean.countPage?data.pageBean.countPage:data.pageBean.currentPage+1)+')">下一页</a></li>';
                $("#byPage").html(pageStr);

                if(data.actionList.length == 0){
                    layer.msg("无数据", {time: 1000, icon: 4, shift: 6}, function () {
                    });
                    return
                }
            }
        })
    }
    //跳转至详情页面
    function info(aid){
        var begin = $("#begin").val()
        var end = $("#end").val()
        var apalce = $("#apalce").val()

        window.location.href="/actioninfo?aid="+aid+"&apalce="+apalce+"&begin="+begin+"&end="+end;
    }
    //按条件查询
    function select(){
        var begin = $("#begin").val()
        var end = $("#end").val()
        if((begin != null || begin != "") && (end != null || end != "") ){

            const begin2 = new Date(begin)
            const end2= new Date(end)
            if(begin2.getTime() > end2.getTime()){
                layer.msg("开始日期大于结束日期咯", {time: 1000, icon: 4, shift: 6}, function () {
                });
                return
            }
        }
        list(1)
    }

</script>

</body>
</html>
